<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
	<meta name="format-detection" content="telephone=no,email=no" />
	<title>课程详细</title>
	<link href="http://cdn.bootcss.com/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
	<link rel="stylesheet" href="../static/css/page/courseShow.css">
	<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1477450813_3041627.css">
	<script type="text/javascript" src="../static/js/public/computeDPR.my.js"></script>
</head>
<body>
	<header class="title"><a class="butt left" href="course.html">返回</a>课程一</header>
	<div class="body">
		<div class="header">
			<div class="img-box header-float-left"><img onerror="this.remove();" src="http://pic.58pic.com/58pic/15/62/72/30r58PICFtM_1024.jpg"></div>
			<div class="header-base">
				<p class="text-overflow-1">课程简介</p>
				<div class="text-box text-overflow-n line">这里是课程一的介绍这里是课程一的介绍这里是课程一的介绍这里是课程一的介绍这里是课程一的介绍这里是课程一这里是课程一的介绍这里是课程一的介绍这里是课程一的介绍这里是课程一的介绍这里是课程一的介绍这里是课程一intro的介绍这里是课程一的介绍这里是课程一intro的介绍这里是课程一的介绍这里是课程一intro的介绍这里是课程一的介绍这里是课程一intro的介绍这里是课程一的介绍这里是课程一intro<div class="butt">展开</div></div>
			</div>
		</div>
		<div class="conter-box">
			<div class="course-status"><span>课程状态：</span><span class="ok"><!-- 未完成的不加ok这个类 -->已完成</span><span>！<a href="#">恭请加持物</a></span></div>
			<div class="hour">
				<div><span>总学时:</span><span>14课时</span></div>
				<div><span>已学课时:</span><span>10课时</span></div>
				<div><span>未学课时:</span><span>4课时</span></div>
			</div>
		</div>
		<div class="pagination"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<ul class="hour-list">
						<!-- 已经学过的  li标签有ok类  iconfont 那里是icon-lock-ok -->
						<!-- 可以学习的  li标签有ok类  iconfont 哪里是icon-lock -->
						<!-- 不能学习的  li标签没有ok类 a标签有no-onclick类  iconfont 那里是icon-lock -->
						<li class="ok"><a href="courseHourShow.html">
							<div class="iconfont icon-lock-ok"></div>
							<div class="text">
								<p class="title">第一课</p>								
							</div>
							<div class="button">复习</div>
						</a></li>
						<li class="ok"><a href="courseHourShow.html">
							<div class="iconfont icon-lock-ok"></div>
							<div class="text">
								<p class="title">第一课</p>								
							</div>
							<div class="button">复习</div>
						</a></li>
						<li class="ok"><a href="courseHourShow.html">
							<div class="iconfont icon-lock-ok"></div>
							<div class="text">
								<p class="title">第一课</p>								
							</div>
							<div class="button">复习</div>
						</a></li>
						<li class="ok"><a href="courseHourShow.html">
							<div class="iconfont icon-lock-ok"></div>
							<div class="text">
								<p class="title">第一课</p>								
							</div>
							<div class="button">复习</div>
						</a></li>
						<li class="ok"><a href="courseHourShow.html">
							<div class="iconfont icon-lock"></div>
							<div class="text">
								<p class="title">第二课</p>								
							</div>
							<div class="button">去学习</div>
						</a></li>
						<li><a class="no-onclick" href="courseHourShow.html">
							<div class="iconfont icon-lock"></div>
							<div class="text">
								<p class="title">第三课</p>
							</div>
							<div class="button">去学习</div>
						</a></li>
						<li><a class="no-onclick" href="courseHourShow.html">
							<div class="iconfont icon-lock"></div>
							<div class="text">
								<p class="title">第三课</p>
							</div>
							<div class="button">去学习</div>
						</a></li>
						<li><a class="no-onclick" href="courseHourShow.html">
							<div class="iconfont icon-lock"></div>
							<div class="text">
								<p class="title">第三课</p>
							</div>
							<div class="button">去学习</div>
						</a></li>
						<li><a class="no-onclick" href="courseHourShow.html">
							<div class="iconfont icon-lock"></div>
							<div class="text">
								<p class="title">第三课</p>
							</div>
							<div class="button">去学习</div>
						</a></li>
					</ul>
				</div>
				<div class="swiper-slide">
					<div class="photo-box">
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">这里是昵称这里是昵称这里是昵称这里是昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">这里是昵称这里是昵称这里是昵称这里是昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">这里是昵称这里是昵称这里是昵称这里是昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">这里是昵称这里是昵称这里是昵称这里是昵称</p>
						</div>
						<div class="photo">
							<div class="img-box">
								<img onerror="this.remove();" src="../static/image/public/photo_up_200_200.png">
							</div>
							<p class="text-overflow-1">这里是昵称这里是昵称这里是昵称这里是昵称</p>
						</div>
					</div>
					<div class="no-more"><span>还没有同学哦！</span></div>
				</div>
			</div>
		</div>
	</div>
</body>
<script src="http://cdn.bootcss.com/zepto/1.2.0/zepto.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script type="text/javascript">
	var mySwiper = new Swiper('.swiper-container', {
		paginationClickable :true,//分页器控制滚动开启
		pagination: '.pagination',
		paginationBulletRender: function (index, className) {
			return '<div class="' + className + ' pagination-item-' + index + '">' + ((index==0)?('课时列表'):('同学')) + '</div>';
		}
	})
	$('.text-overflow-n .butt').click(function(e){
		var dom = $('.text-overflow-n');
		if ( dom.hasClass('line') ) {
			dom.removeClass('line');
			$(this).text('收起');
		}else{
			dom.addClass('line');
			$(this).text('展开');
		}
	});
</script>
</html>